<template>
    <div class="my_discovery">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" height="250px" width="100%" />
            </van-swipe-item>
        </van-swipe>

        <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="item in gridData" :key="item.id">
        <van-image :src="item.imgUrl" height="30px" />
        <div class="grid_text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 发现好歌单 -->
    <div class="music_list">
      <div class="text">发现好歌单</div>
      <van-button plain round type="default" size="small">
        <span>查看更多</span>
      </van-button>
    </div>

    <!-- 歌单列表 -->
    <van-row :gutter="[20, 20]">
      <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
        <img :src="item.musicImg" alt="" width="100%" height="160px">
        <div>{{ item.auth }}</div>
      </van-col>
    </van-row>
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 宫格数据
const gridData = ref([
  { id: 1, imgUrl: 'https://tse2-mm.cn.bing.net/th?id=OIF-C.%2fZBs33ZT0Ah8GGXZfGHHlg&w=196&h=196&c=7&r=0&o=5&dpr=2&pid=1.7', text: "新歌" },
  { id: 2, imgUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C._bw95e9zXUa4yzFz-dlGcAHaJ0?w=148&h=196&c=7&r=0&o=5&dpr=2&pid=1.7', text: "歌单" },
  { id: 3, imgUrl: '', text: "私人FM" },
  { id: 4, imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.lndhBS4lDUlGP3R40lI5hAAAAA?w=173&h=180&c=7&r=0&o=5&dpr=2&pid=1.7', text: "排行榜" },
])

// 歌单数据
const musicList = ref([
  {id:1,musicImg:'https://image.kpopmap.com/2020/09/enhypen-member-profile.jpg',auth:'ENHYPEN'},
  {id:2,musicImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.XkeYrWoofeoQrBjwu0DeCgHaE8?w=248&h=187&c=7&r=0&o=5&dpr=2&pid=1.7',auth:'TXT'},
  {id:3,musicImg:'https://ygex.jp/treasure/assets/img/top/img_mainvisual.jpg?20221101',auth:'TREASURE'},
  {id:4,musicImg:'https://0.soompi.io/wp-content/uploads/2023/08/20094649/BOYNEXTDOOR.jpeg',auth:'BOYNEXTDOOR'}
])

/*轮播 */
    const images =[
        'https://tse4-mm.cn.bing.net/th?id=OIF-C.%2bFS0TFZaPFLSAbDDdQ1qBA&w=184&h=184&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.PAds5b6cbeWnJs9892qKsgHaHa?rs=1&pid=ImgDetMain',
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.VYgpKLY0deN7DJ8S1nwLjQHaHa?w=168&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse4-mm.cn.bing.net/th/id/OIP-C.r6fNCN1U7utrTHWARGIRYgHaHa?w=187&h=187&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.6LwncPJToNkLpxduInF1dAHaGj?w=215&h=191&c=7&r=0&o=5&dpr=2&pid=1.7',
        
    ]
</script>
<style scoped>
.my_discovery {
  margin-top: 10px;
  height: 100%;
}

.grid_text {
  font-size: 15px;
}

.music_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.music_list .text {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.music_list span {
  color: #000;
}
</style>